上篇提到了完成任務後暱稱與完成時間會上傳到Firebase資料庫中，今天就把這些資料下載下來作為排行榜～

要向firebase取得資料的指令為：

var rankdataRef = firebase.database().ref('資料名稱');
    rankdataRef.on('value',function (snapshot) {
      //取得資料後要完成的事
    });
});

.on與.once指令都可以向firebase取得資料，但.on是每當firebase資料有異動時，會即時回傳更新資料；.once則是向firebase取得一次性資料，所以當firebase資料有異動時，需要再呼叫一次才可以取得更新後的資料。

因為我需要從使用者所屬的學年度將資料抓下來，所以在.ref()填入學號換算成入學年度的算式，並且取得的資料要依照時間順序做排序，故在rankdataRef後加上了.orderByChild('timeStamp');。

var rankdataRef = firebase.database().ref(parseInt(me.year/100000)-1000).orderByChild('timeStamp');
    rankdataRef.on('value',function (snapshot) {
      //取得資料後要完成的事
    });
});

之後為了將取得的資料展開使用了.forEach()，.forEach()類似迴圈的概念，會將資料一筆一筆跑過一遍。利用.forEach()我將從firebase抓下來的資料額外加上名次項目（order）儲存到陣列裡。

const [rankItems, setrankItems] = useState([]);
useEffect(() => {
  var A = [];
  var i = 0;
  var puzzle=[]
  var rankdataRef=
  firebase.database().ref(parseInt(me.year/100000)-1000).orderByChild('timeStamp');
  rankdataRef.on('value',function (snapshot) {
      snapshot.forEach(function (childSnapshot) {
        let childKey = childSnapshot.key;
        let childData = childSnapshot.val();
        if (childData !== A[i]) {
          puzzle={...childData,order:i+1}
          A[i] =  puzzle;
          i++;
          setrankItems(A);
       }
    });
  });
},[me]);

最後藉由FlatList與自訂元件<RankDetail>將排行榜渲染出來，這樣排行榜就完成了～

<FlatList
   data={rankItems}
   renderItem={({ item }) =>
      <RankDetail
          rank={item}
          navigation={navigation}
      />}
   keyExtractor={item => item.order}
/>